<template>
  <div>
    <van-cell-group>
      <van-cell title="平台服务" style="background: #f2f2f2;padding: 0 16px 8px">
      </van-cell>
    </van-cell-group>
    <van-row class="order_status">
      <van-col span="6">
        <div class="order_status_icon" @click="$router.push({path: '/user/collect'})">
          <van-icon name="shoucang"/>
        </div>
        <div>商品收藏</div>
      </van-col>
      <van-col span="6">
        <div class="order_status_icon" @click="$router.push({path: '/user/footmark'})">
          <van-icon name="chaxun1"/>
        </div>
        <div>浏览足迹</div>
      </van-col>
      <van-col span="6">
        <div class="order_status_icon" @click="kefu">
          <van-icon name="kefu"/>
        </div>
        <div>联系客服</div>
      </van-col>
      <van-col span="6">
        <div class="order_status_icon" @click="$router.push({path: '/user/feedback'})">
          <van-icon name="yijianfankui1"/>
        </div>
        <div>意见反馈</div>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { Row, Col, Dialog } from 'vant';
import { userIndex } from '@/api/api';

export default {
  name: 'order-ser',
  methods: {
    kefu() {
      Dialog.alert({
        title: '提示',
        message: '客服请进入公众号或者小程序'
      }).then(() => {
        // on close
      });
    }
  },
  components: {
    [Dialog.name]: Dialog,
    [Row.name]: Row,
    [Col.name]: Col
  }
};
</script>


<style scoped lang="scss">
@import '../../assets/scss/mixin';
.order_status {
  background-color: #fff;
  text-align: center;
  padding: 10px 0;
  font-size: 12px;

  > div {
    @include one-border;
    &::after {
      top: 50%;
      left: 50%;
      border-bottom: 0;
      border-right: 1px solid $border-color;
      height: 150%;
      transform: scale(0.5) translate3d(-50%, -50%, 0);
      transform-origin: 0 0;
    }
    &:last-child::after {
      border: 0;
    }
  }

  .order_status_icon {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-block;
    i {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
      font-size: 24px;
      color: #000;
    }
  }
}
</style>
